import React, { memo, useState, useEffect } from 'react'
import dayjs from 'dayjs';
import { Descriptions, Spin, message } from 'antd';

import { getProjectDetailApi } from '@/api'
import { getLabel } from "@/utils";
import * as commonDictOptions from "@/constants"
import { projectDetailDescription, FIVE_TABLE_COLUMN, OTHER_TABLE_COLUMN, PROJECT_TABLE_COLUMN } from './config'
import { ProjectDetailWarpper } from './style'

import CustomTitle from '@/components/custom-title'
import CustomTable from '@/components/custom-table'


const index = memo((props) => {
    const { params = {} } = props
    const [spinningLoading, setSpinningLoading] = useState(true)
    const [items, setItems] = useState([])
    const [detail, setDetail] = useState({})
    async function fetchData() {
        try {
            const res = await getProjectDetailApi({ ...params })
            const detail = { ...res.data }
            detail.startDate = detail.startDate && dayjs(res.data.startDate).format("YYYY-MM-DD")
            detail.completeDate = detail.completeDate && dayjs(res.data.completeDate).format("YYYY-MM-DD")
            detail.emphasisDesc = detail.emphasisDesc && getLabel(commonDictOptions.emphasisDescOptions, detail.emphasisDesc)
            for (let i = 0; i < projectDetailDescription.length; i++) {
                projectDetailDescription[i].children = detail[projectDetailDescription[i].key] || '-'
            }
            setItems([...projectDetailDescription])
            setDetail({ ...detail })
        } catch (error) {
            message.error(error || "系统出错",);
        } finally {
            setSpinningLoading(false)
        }
    }
    useEffect(() => {
        fetchData()
    }, [])
    return (

        <Spin tip="Loading..." spinning={spinningLoading}>
            <ProjectDetailWarpper>
                <Descriptions
                    title={detail.projectName || "-"}
                    size="default"
                    column={4}
                    items={items}
                    labelStyle={{ color: "#96AFD5", fontSize: "14px" }}
                    contentStyle={{
                        "color": "#96AFD5",
                        fontSize: "14px"
                    }}
                />
                <CustomTitle title="五方责任主体" />
                <CustomTable columns={FIVE_TABLE_COLUMN} data={detail.projectCompanyList} showPagination={false}></CustomTable>

                <CustomTitle title="其他参建单位" />
                <CustomTable columns={OTHER_TABLE_COLUMN} data={detail.otherCompanyList} showPagination={false}></CustomTable>

                <CustomTitle title="单位工程信息" />
                <CustomTable columns={PROJECT_TABLE_COLUMN} data={detail.monomerList} showPagination={false}></CustomTable>
            </ProjectDetailWarpper>
        </Spin>

    )
})

export default index